<script setup>
    import { onMounted } from 'vue'
    import { useStore } from 'vuex'
    import ContentCard from '../../../components/ContentCard.vue'

    const store = useStore()

    onMounted(() => {
        let { contourCoordinates, color, coordinate } = store.state.project.projectArea

        var map = new BMapGL.Map("areaContainer");            // 创建Map实例
        map.enableScrollWheelZoom();                           //启用滚轮放大缩小  

        var point = new BMapGL.Point(coordinate.split(',')[0], coordinate.split(',')[1]);    // 创建点坐标
        map.centerAndZoom(point, 14);                     // 初始化地图,设置中心点坐标和地图级别。

        if(!contourCoordinates){
            return 
        }

        let contour = JSON.parse(contourCoordinates)

        
        contour.map((item) => {
            let data = []
            let arr = item.split(';')
            arr.map((v) => {
                data.push(new BMapGL.Point(v.split(',')[0], v.split(',')[1]))
            })
            var polygon = new BMapGL.Polygon(data, {strokeColor: color, fillColor: color, strokeWeight:1, strokeOpacity:0.8,fillOpacity:0.7});  
            map.addOverlay(polygon)
        })
    })

</script>

<template>
    <content-card back="list">
        <template #backText>
            <div class="text active">项目列表</div>
        </template>
        <template #currentTitle>
            &nbsp;&gt;&nbsp;<div class="text active">所在区域</div>
        </template>


        <div class="archives-wrap flex">
            <div id="areaContainer"></div>
        </div>

    </content-card>
</template>

<style lang="less" scoped>
    .archives-wrap{
        margin: 0 24px 48px 24px;

        #areaContainer{
            width: 1500px;
            height: 720px;
        }
    }
</style>


